<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI学术评审</title>
    <style>
        body.desktop {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            width: 70%;
            min-width: 1300px;
            margin: 0 auto;
            padding: 0;
        }

        body.mobile {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
        }

        .header {
            background: #1F3991;
            height: 80px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        h1 {
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        #upload-file {
        font-weight: 500;
        color: gold;
        background-color: #1F3991;
        border-color: #1F3991;       
        }

        input[type="file"] {
           font-weight: 500;
        }

        input[type="text"] {
            margin: 10px 0;
            padding: 10px;
            width: 100%;
            box-sizing: border-box;
        }

        button {
            padding: 10px 20px;
            background-color: #1F3991;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        iframe {
            width: 100%;
            height: 500px;
            border: 1px solid #ccc;
            margin-top: 20px;
        }

        #review {
            margin-top: 20px;
            text-align: left;
        }

        #progressDiv {
            margin-top: 20px;
            display: none;
        }

        .progressLabel {
            vertical-align: middle;
            margin-right: 10px;
            display: inline-block;
        }

        #progressBar {
            width: calc(100% - 100px);
            background-color: #ddd;
            display: inline-block;
            vertical-align: middle;
        }

        #progress {
            width: 0%;
            height: 30px;
            background-color: #4CAF50;
            text-align: middle;
            line-height: 30px;
            color: white;
        }

        #pageImg {
            margin-top: 20px;
            max-width: 500px;
            width: 100%;
            height: auto;
        }
    </style>
    <script src="{{ url_for('static', filename='js/marked.min.js') }}"></script>
</head>

<body class="{{ device_type }}">
    <div class="container">
        <div class="header">
            <h1>AI学术评审</h1>
        </div>
        <form id="postForm" action="/" method="post">
            <input type="hidden" id="fileId" name="file_id" value="test">
        </form>
        <form id="uploadForm" , enctype="multipart/form-data">
            <input id="uploadFile" name="file" type="file" accept=".pdf" placeholder="选择文件">
            <!-- <input type="text" name="url" placeholder="选择上传PDF或输入PDF的URL，如https://arxiv.org/pdf/2012.14660"> -->
            <!-- <input type="file" id="fileInput" name="file" accept=".pdf" style="display:none;"> -->
            <!-- 自定义样式按钮 -->
            <!-- <button type="button" onclick="document.getElementById('fileInput').click()">选择文件(PDF)</button> -->
            <p>
            <button id="upload" type="submit">上传论文(PDF)</button>
            <!-- submit行为将通过JavaScript动态控制 -->
        </form>
        <p>
        <a href="#" onclick="document.getElementById('postForm').submit(); return false;">样例演示</a>
        <p>
        <div id="progressDiv">
            <span class="progressLabel">论文解析：</span>
            <div id="progressBar">
                <div id="progress">0%</div>
            </div>
        </div>
        {% if file_id %}
        <hr>
        <div id="showPage">
            <img id="pageImg" src="/page/{{ file_id }}" alt="论文首页图像">
            <form id="reviewForm" action="/review" method="post">
                <input type="hidden" name="file_id" value="{{ file_id }}">
                <button type="submit" class="review-button">开始评审</button>
            </form>
        </div>
        <p>
        <hr>
        <div id="review"></div>
        {% endif %}
    </div>
    <script>
        const uploadForm = document.getElementById('uploadForm');
        const progressDiv = document.getElementById('progressDiv');
        const progress = document.getElementById('progress');
        const postForm = document.getElementById('postForm');
        const reviewForm = document.getElementById('reviewForm');
        const reviewDiv = document.getElementById('review');
        const fileId = "{{ file_id | default('', true) }}";

        uploadForm.addEventListener('submit', function (e) {
            e.preventDefault();
            if (fileId) {
                const showPageDiv = document.getElementById('showPage');
                showPageDiv.innerHTML = ''
                reviewDiv.innerHTML = ''
            }
            progressDiv.style.display = 'block';
            const formData = new FormData(this);
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload', true);

            let progressWidth = 0;
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    const response = JSON.parse(xhr.responseText);
                    progressWidth = 100
                    progress.style.width = '100%';
                    if (xhr.status === 200) {
                        progress.textContent = '100%';
                        document.getElementById('fileId').value = response.file_id;
                        progressDiv.style.display = 'none';
                        postForm.submit();
                    } else {
                        progress.textContent = response.message;
                    }
                }
            };
            xhr.send(formData);

            const interval = setInterval(() => {
                if (progressWidth < 99) {
                    progressWidth++;
                    progress.style.width = `${progressWidth}%`;
                    progress.textContent = `${progressWidth}%`;
                } else {
                    clearInterval(interval)
                }
            }, 60000 / 99);
        });

        if (fileId) {
            reviewForm.addEventListener('submit', function (event) {
                event.preventDefault();
                const formData = new FormData(reviewForm);
                const xhr = new XMLHttpRequest();
                xhr.open('POST', '/review', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 3) {
                        // 使用 marked 库将 Markdown 转换为 HTML
                        const markdownText = xhr.responseText;
                        const html = marked.marked(markdownText);
                        reviewDiv.innerHTML = html;
                    }
                };
                const params = new URLSearchParams(formData).toString();
                xhr.send(params);
            });
        }
    </script>
</body>

</html>
